<div class="animated fadeIn">
  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Bootstrap Dropdowns
          <div class="card-header-actions">
            <a href="https://valor-software.com/ngx-bootstrap/#/dropdowns" target="_blank">
              <small className="text-muted">docs</small>
            </a>
          </div>
        </div>
        <div class="card-body">
          <div class="btn-group" dropdown>
            <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
              Button dropdown <span class="caret"></span>
            </button>
            <ul *dropdownMenu class="dropdown-menu" role="menu">
              <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
              <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
              <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
              <li class="divider dropdown-divider"></li>
              <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Dropdowns
          <small>trigger by <code>&lt;a&gt;</code></small>
        </div>
        <div class="card-body">
      <span dropdown (onShown)="onShown()" (onHidden)="onHidden()" (isOpenChange)="isOpenChange()">
        <a href dropdownToggle (click)="false">Click me for a dropdown, yo!</a>
          <ul *dropdownMenu class="dropdown-menu">
            <li *ngFor="let choice of items">
              <a class="dropdown-item" href="#">{{choice}}</a>
            </li>
          </ul>
      </span>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Dropdowns
          <small>split button</small>
        </div>
        <div class="card-body">
          <div class="btn-group" dropdown>
            <button type="button" class="btn btn-danger">Action</button>
            <button type="button" dropdownToggle class="btn btn-danger dropdown-toggle dropdown-toggle-split">
              <span class="caret"></span>
              <span class="sr-only">Split button!</span>
            </button>
            <ul *dropdownMenu class="dropdown-menu" role="menu">
              <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
              <li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
              </li>
              <li role="menuitem"><a class="dropdown-item" href="#">Something else
                here</a></li>
              <li class="divider dropdown-divider"></li>
              <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Dropdowns
          <small>manual triggers</small>
        </div>
        <div class="card-body">
          <div class="btn-group" dropdown [isOpen]="status.isOpen" (isOpenChange)="change($event)" placement="top">
            <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
              Button dropdown <span class="caret"></span>
            </button>
            <ul *dropdownMenu class="dropdown-menu" role="menu">
              <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
              <li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
              </li>
              <li role="menuitem"><a class="dropdown-item" href="#">Something else
                here</a></li>
              <li class="divider dropdown-divider"></li>
              <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
              </li>
            </ul>
          </div>
          <button type="button" class="btn btn-primary" (click)="toggleDropdown($event)">Toggle</button>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Dropdowns
          <small>disabled menu</small>
        </div>
        <div class="card-body">
          <div class="btn-group" dropdown [isDisabled]="disabled">
            <button dropdownToggle type="button" class="btn btn-primary dropdownToggle">
              Button dropdown <span class="caret"></span>
            </button>
            <ul *dropdownMenu class="dropdown-menu" role="menu">
              <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
              <li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
              </li>
              <li role="menuitem"><a class="dropdown-item" href="#">Something else
                here</a></li>
              <li class="divider dropdown-divider"></li>
              <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
              </li>
            </ul>
          </div>
          <button type="button" class="btn btn-warning" (click)="disabled = !disabled">
            Enable/Disable
          </button>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Dropdowns
          <small>menu alignment</small>
        </div>
        <div class="card-body">
          <div class="btn-group" dropdown placement="bottom right">
            <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
              This menu is right-aligned <span class="caret"></span>
            </button>
            <ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu">
              <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
              <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
              <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
              <li class="divider dropdown-divider"></li>
              <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Dropdowns
          <small>dropup variation</small>
        </div>
        <div class="card-body">
          <div class="btn-group" dropdown [dropup]="isDropup">
            <button id="button-dropup" dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
              Dropup <span class="caret"></span>
            </button>
            <ul id="dropdown-dropup" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-dropup">
              <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
              <li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
              </li>
              <li role="menuitem"><a class="dropdown-item" href="#">Something else
                here</a></li>
              <li class="divider dropdown-divider"></li>
              <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="card-footer">
          <div class="checkbox">
            <label>
              <input type="checkbox" value="true" [(ngModel)]="isDropup"
                     style="display: inline-block;">
              {{ isDropup ? 'Is dropup' : 'Is dropdown' }}
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Dropdowns
          <small> with <code>autoClose</code></small>
        </div>
        <div class="card-body">
          <div class="btn-group" dropdown [autoClose]="autoClose">
            <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
              Button dropdown <span class="caret"></span>
            </button>
            <ul *dropdownMenu class="dropdown-menu" role="menu">
              <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
              <li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
              </li>
              <li role="menuitem"><a class="dropdown-item" href="#">Something else
                here</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
